<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true">
        <el-form-item label="作业名称：">
          <el-input v-model="search.jobName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="作业类型：">
          <el-select v-model="search.jobType">
            <el-option
              v-for="option in controlData.jobTypeOptions"
              v-bind:value="option.value"
              :key="option.key"
              :label="option.key"
            ></el-option>
          </el-select>
        </el-form-item>
				<el-form-item label="作业状态：">
          <el-select v-model="search.jobStatus">
            <el-option
              v-for="option in controlData.jobStatusOptions"
              v-bind:value="option.value"
              :key="option.key"
              :label="option.key"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="searchQuery">查询</el-button>
          <el-button type="info" @click="search = {}; searchQuery();">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      :data="query"
      keyProp="jobId"
      :formValidate="defaultFormValidate"
      isCustomForm
      menuType="text"
      :showOrder="false"
      :showView="false"
			:showCheckbox="false"
      :menuOptions="{ width: '260px' }"
    >
      <qm-table-column field="jobGroup" width="100px" sortable="true">作业分组</qm-table-column>
      <qm-table-column field="jobTypeText" sortable="true" width="150px">作业类型</qm-table-column>
      <qm-table-column field="jobName" sortable="true">作业名称</qm-table-column>
      <qm-table-column field="isEnabled" fieldType="yesno" sortable="true" width="100px">是否启用</qm-table-column>
      <qm-table-column field="jobStatusText" sortable="true" width="100px">作业状态</qm-table-column>
      <qm-table-column field="lastExecStatus" width="250px">
        执行情况
        <template v-slot:content="{ row }">
          <template v-if="row.jobStatus != 'noneSchedule'">
            <span style="font-size:10px;">上次执行时间：{{ row.lastExecStartDate }}</span>
            <br />
            <span style="font-size:10px;">上次执行结果：
               <span >{{ row.lastExecStatus | filtervalue }}</span>
            </span>
            <br />
            <span style="font-size:10px;">上次执行耗时(s)：{{ row.lastExecTimespan }}</span>
            <br />
            <span style="font-size:10px;">预计下次执行时间：{{ row.nextTriggerTime }}</span>
          </template>
        </template>
      </qm-table-column>

			<template v-slot:toolbar>
				<el-tooltip class="item" effect="dark" content="停止所有作业" placement="top-start">
          <el-button type="danger" icon="el-icon-remove-outline" @click="doCommand('stop')">停止服务</el-button>
        </el-tooltip>
				<el-tooltip class="item" effect="dark" content="重启所有作业" placement="top-start">
          <el-button type="success" icon="el-icon-video-play" @click="doCommand('start')">启动服务</el-button>
        </el-tooltip>
			</template>
      <template v-slot:moreBtn="{ row }">
        <el-button type="text" @click="showLog(row.jobId)">日志</el-button>
        <el-tooltip class="item" effect="dark" content="启动这个作业，加入到调度平台。" placement="top-start">
          <el-button type="text" @click="doCommand('startOne', row.jobId)">启动</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="停止这个作业，从调度平台移除这个作业。" placement="top-start">
          <el-button type="text" @click="doCommand('stopOne', row.jobId)">停止</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="立即执行这个作业" placement="top-start">
          <el-button type="text" @click="doCommand('execute', row.jobId)">执行</el-button>
        </el-tooltip>
      </template>

      <template v-slot:form="{ models, controlData, pageAction }">
        <create ref="create" :models="models" :controlData="controlData" :pageAction="pageAction"></create>
      </template>
    </qm-table>

    <vxe-modal
      v-model="dsJobLogVisible"
      width="1000px"
      :max-height="800"
      title="作业执行记录"
      destroy-on-close
      :position="{ top: '15%' }"
    >
      <qm-table
        :urls="{ query: '/schedule/dsJobLog/query' }"
        keyProp="logId"
        :beforeQuery="beforeLogQuery"
        :showToolbar="false"
        :showMenu="false"
        :showCheckbox="false"
      >
        <qm-table-column field="startTime" fieldType="datetime" width="150px">开始执行时间</qm-table-column>
        <qm-table-column field="endTime" width="150px" fieldType="datetime">结束执行时间</qm-table-column>
        <qm-table-column field="status" width="100px"  fieldType="enum"
        :enumOptions="[
          { key: '成功', value: 'success' },
          { key: '失败', value: 'fail' },
          { key:'运行中',value:'running'}
        ]"
        >执行状态
        </qm-table-column>
        <qm-table-column field="message">消息</qm-table-column>
      </qm-table>
    </vxe-modal>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import Create from "./create";
import request from "@/utils/request";
export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: "/schedule/dsJob/getListModel",
      query: "/schedule/dsJob/query",
      save: "/schedule/dsJob/save",
      delete: "/schedule/dsJob/delete",
      entity: "/schedule/dsJob/getEntity",
    };
  }

  mixin() {
    return {
      components: {
        Create,
      },
      filters:{
        filtervalue(val){
          if(val){
          return "成功";
        }
        return "失败"
        }
      },
      data() {
        return {
          dsJobLogVisible: false,
          showLogJobId: "",
        };
      },
      methods: {
        renderLastExecStatus(data, r, column) {
          let html = [];
          if (r.jobStatus != "noneSchedule") {
            html.push(
              "<span style='font-size:10px;'>上次执行时间：" +
                r.lastExecStartDate +
                "</span>"
            );
            html.push(
              "<span style='font-size:10px;'>上次执行结果：" +
                r.lastExecStatus +
                "</span>"
            );
            html.push(
              "<span style='font-size:10px;'>上次执行耗时(s)：" +
                r.lastExecTimespan +
                "</span>"
            );
            html.push(
              "<span style='font-size:10px;'>预计下次执行时间：" +
                r.nextTriggerTime +
                "</span>"
            );
          }
          return html.join("<br/>");
        },
        showLog(jobId) {
          this.showLogJobId = jobId;
          this.dsJobLogVisible = true;
        },

        doCommand(comName, jobId) {
          this.$confirm("确定要执行此操作？", "提示").then(() => {
            request({
              url: "/schedule/dsJob/command",
              method: "get",
              params: { commandName: comName, jobId: jobId },
            }).then((r) => {
              if (r && r.success) {
                this.notifySuccess("操作成功!");
                this.searchQuery();
              } else {
                this.notifyError("操作失败,原因：" + r.message);
              }
            });
          });
        },

        beforeLogQuery(params) {
          this.super.$util.extend(params.query, { jobId: this.showLogJobId });
        },
      },
    };
  }
}
</script>

<style scoped lang="scss">
</style>
